import React, { useState, useEffect, useRef } from 'react';
import styles from './searchList.less';
import ProductsCard from '../../components/productsCard';
import { useSelector, useHistory, useDispatch, useParams } from 'dva';
import InViewPort from '../../components/InViewPort';
import { getSearchTypes } from '../../utils/authority';
import { E } from '../../../../constants';
import { useIntl } from 'umi';
import { getLocale } from 'umi';
import parserOptionsMapper from 'eslint-plugin-jsx-a11y/__tests__/__util__/parserOptionsMapper';
function SearchList(props) {
  const { productList, productPageIndex, productLastPage } = useSelector(({ index }) => index);
  const dispatch = useDispatch();
  // searchWord 就是selectedExhibitId
  const { searchWord } = useParams();
  // keyWord就是搜索的关键词
  const keyWord = props.location.query.searchWord;
  useEffect(() => {
    // const searchType = (getSearchTypes()).map(item => E.searchType[item].title)
    // console.log(searchType, 'searchTypessssss')
    
    if (searchWord != 0) {
      dispatch({
        type: 'index/apiGetProductList',
        payload: {
          page: 0,
          pageSize: 10,
          categoryId: searchWord,
          name: keyWord,
          enabled: true,
          approved: true,
          approveResult: 'APPROVED',
          language: getLocale() == 'zh-CN' ? 'ZH' : 'EN',
        },
        isReset: true,
      });
    } else {
      dispatch({
        type: 'index/apiGetProductList',
        payload: {
          page: 0,
          pageSize: 10,
          name: keyWord,
          enabled: true,
          approved: true,
          approveResult: 'APPROVED',
          language: getLocale() == 'zh-CN' ? 'ZH' : 'EN',
        },
        isReset: true,
      });
    }
    return () => {
      dispatch({
        type: 'index/setState',
        payload: {
          productList: [],
          productPageIndex: 1,
          productLastPage: null,
        },
      });
    };
  }, []);
  function onEnter() {
    if (productPageIndex < productLastPage) {
      if (searchWord != 0) {
        dispatch({
          type: 'index/apiGetProductList',
          payload: {
            page: productPageIndex+1,
            pageSize: 10,
            categoryId: searchWord,
            name: keyWord,
            enabled: true,
            approved: true,
            approveResult: 'APPROVED',
            language: getLocale() == 'zh-CN' ? 'ZH' : 'EN',
          },
        });
      } else {
        dispatch({
          type: 'index/apiGetProductList',
          payload: {
            page: productPageIndex+1,
            pageSize: 10,
            name: keyWord,
            enabled: true,
            approved: true,
            approveResult: 'APPROVED',
            language: getLocale() == 'zh-CN' ? 'ZH' : 'EN',
          },
        });
      }
    }
  }
  const intl = useIntl();
  return (
    <div className={styles.box}>
      <div className={styles.productsBox}>
        {productList &&
          productList.map((item, index) => {
            if (index == productList.length - 1) {
              return (
                <InViewPort key={index} onEnter={onEnter}>
                  <ProductsCard obj={item} key={index}/>
                </InViewPort>
              );
            }
            return (
              <div key={index}>
                <ProductsCard obj={item} key={index} />
              </div>
            );
          })}
        {productList && productList.length % 2 != 0 && <div className={styles.emptyLabel}></div>}
      </div>
      {productList.length < 1 && (
        <span className={styles.mess}>{intl.formatMessage({ id: 'NULL' })}</span>
      )}
    </div>
  );
}

export default SearchList;
